<template>
  <div class="searchRecommend">
    <p @click="searchword($store.state.searchWord)">
      搜索"{{ $store.state.searchWord }}"
    </p>
    <ul>
      <li v-for="item in $store.state.searchRecommendList" :key="item.id">
        <i class="iconfont icon-41"></i>
        <p @click="searchword(item.keyword)">{{ item.keyword }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { searchMusicList } from "@/api/Search";

export default {
  data() {
    return {
      List: [],
    };
  },

  methods: {
    searchword(val) {
      this.$store.commit("changeSearchWorld", val);
      this.$store.commit("changeIsSearchShow", false);
      this.$store.commit("changeIsShow", false);
      searchMusicList(val).then((res) => {
        this.List = res.data.result.songs;
        //   // 扔去vuex
        this.$store.dispatch("searchMusicList", this.List);
      });
    },
  },

};
</script>

<style lang="scss" scoped>
.searchRecommend {
  p {
    color: #507daf;
    height: vw(80);
    margin-left: vw(20);
    line-height: vw(80);
    padding-right: vw(20);
    font-size: vw(30);
    border-bottom: 1px solid #eee;
  }
  ul {
    li {
      display: flex;
      align-items: center;
      p {
        color: #000;
        flex-grow: 1;
        border-bottom: 1px dashed #ccc;
        // height: vw(80);
        // line-height: vw(80);
        font-size: vw(28);
        width: 100%;
        padding-right: vw(20);
      }
      i {
        margin: 0 10px;
        color: #666;
        font-size: vw(40);
      }
    }
  }
}
</style>